<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>setting</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <style>
        html,body{
            width: 100%;
            padding:0rem;
            margin: 0px;
        }
        body{
            background-color: #f5f7fa;
        }
        .tip{
            display: flex;
            white-space: nowrap;
        }
        .top{
            display: flex;
            align-items: center;
            flex-flow: row nowrap;
            justify-content: space-between;
            width: 100%;
            margin-top: 30px;
        }
        #container{
            width: 80%;
            margin:0 auto;
        }
        .icon_box{
            display: flex;
            flex-flow: column;
            color:#1E9FFF
        }
        .icon_box>div:nth-child(1){
            font-family: STXingkai;
            font-size: 30px;
        }
        #main{
            margin: 30px 0px;
            background-color: #ffffff;
            border: .5px solid rgba(0,0,0,.08);
            box-shadow: 0 0 10px 0 rgba(39,106,255,.13);
            padding: 10px;
        }
        .type_box{
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            width: 100%;
            border-bottom: 1px solid #ededed;
            margin-bottom: 10px;
        }
        .type{
            padding: 5px 10px;
            cursor: pointer;
            flex:1;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .type_select{
            padding: 5px 10px;
            background-color: #1E9FFF;
            color: #fff;
            cursor: pointer;
            flex:1;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .type:hover{
            color:#1E9FFF
        }
        #list{
            display: flex;
            flex-flow: row wrap;
            justify-content: normal;
        }
        .course_item{
            width: 160px;
            border: .5px solid rgba(0,0,0,.08);
            box-shadow: 0 0 10px 0 rgba(39,106,255,.13);
            margin:10px;
            margin-left: 25px;
            cursor: pointer;
            transition:all .4s;
        }
        .login_btn{
            cursor: pointer;
        }
        .course_item:hover{
            transform:scale(1.2);
        }
        .img_box{
            width: 100%;
            height: 100px ;
        }
        .course_detail_box{
            padding: 5px;
            height: 80px;
            display: flex;
            flex-flow: column;
            justify-content: space-between;
        }
        .course_detail_bottom{
            display: flex;
            flex-flow: column;
            font-size: 12px;
            color: #999;
        }
        .play_times_box,.create_time_box{
            flex: 1;
            display: flex;
            align-items: center;
            white-space: nowrap;
        }
        .little_box{
            display: flex;
            align-items: center;
            flex-flow: nowrap;
        }
        .course_title{
            font-size: 13px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;/*重点，不能用block等其他*/
            -webkit-line-clamp: 2;/*重点IE和火狐不支持*/
            -webkit-box-orient: vertical;/*重点*/
        }
        .create_person_box{
            margin-top: 5px;
        }
        .person_box{
            display: flex;
            flex-flow: row nowrap;
            padding: 10px 0;

        }
        #head-img {
            width: 50px;
            height: 50px;
            margin-right: 10px;
            border-radius: 50%;
        }
        .hide{
            display: none;
        }
        #top_personal_signature{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 12px;
            color: #999;
            line-height: 16px;
            margin-top: 4px
        }
    </style>
</head>
<body>
<div id="container">
    <div class="top">
        <div class="icon_box">
            <div>视频教学网</div>
            <div>www.videostudy.com</div>
        </div>
        <div class="tip">
            <img src="../img/账号.svg" width="20px" height="20px" id="default_head"/>
            <span class="login_btn">登录 / 注册</span>
            <div class="person_box hide">
                <img src="../img/douyin.png" id="head-img" >
                <div style="width: 289px;">
                    <div id="top_nickname"></div>
                    <div id="top_personal_signature"></div>
                </div>
            </div>
        </div>
    </div>
    <div id="main">
        <div class="type_box">
            <div>请选择：</div>
            <div class="type" id="personal_signature">个人信息</div>
            <div class="type" id="reserve_course">收藏课程</div>
            <div class="type" id="look_records">浏览记录</div>
        </div>
        <div id="display-container">
            <div id="individual_box">
                <form class="layui-form" action="" lay-filter="myInfo" style="width: 40%;">
                    <input type="text" name="id" lay-verify="title" autocomplete="off" placeholder="请输入用户名" class="layui-input hide">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入用户名" class="layui-input">
                        </div>
                    </div>
                    <label class="layui-form-label">头像</label>
                    <div class="layui-input-inline" style="margin-bottom: 15px">
                        <div class="layui-upload-drag" id="upImg">
                            <i class="layui-icon"></i>
                            <p>点击上传头像，或将图片拖拽到此处</p>
                            <div class="layui-hide" id="uploadDemoView">
                                <hr>
                                <input type="text" name="faceImage"  autocomplete="off" placeholder="" class="layui-input layui-hide">
                                <img src="" alt="上传成功后渲染" style="max-width: 196px">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">昵称</label>
                        <div class="layui-input-block">
                            <input type="text" name="nickname" lay-verify="title" autocomplete="off" placeholder="请输入昵称" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">电话</label>
                        <div class="layui-input-block">
                            <input type="text" name="phone" lay-verify="phone" autocomplete="off" placeholder="请输入电话" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-block">
                            <input type="text" name="email" lay-verify="email" autocomplete="off" placeholder="请输入邮箱" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">个性签名</label>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入个性签名" class="layui-textarea" name="personalSignature"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit" style="width: 100%">立即提交</button>
                        </div>
                    </div>
                </form>
            </div>
            <div id="list">
            </div>
        </div>

    </div>
</div>
<script type="text/javascript" src="../layui/layui.js"></script>
<script>
    layui.use(['layer','form','upload'],function () {
        var $ = layui.jquery,
            form = layui.form,
            upload = layui.upload,
            layer = layui.layer;
        $(".login_btn").click(function () {
            window.location.href="../home/userLogin"
        })

        upload.render({
            elem: '#upImg'
            ,url: '../user/up' //改成您自己的上传接口
            ,accept: 'images'
            ,done: function(res){
                layer.msg(res.msg)
                if(res.code == 200){
                    layui.$('#uploadDemoView').removeClass('layui-hide').find('input').val("img/"+res.data);
                    layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr("src","../img/"+res.data);
                }else{
                    layui.$('#uploadDemoView').removeClass('layui-hide').find('input').val(res.msg);
                }
            }

        });

        //点击获取用户个人信息并展示
        $("#personal_signature").click(function () {
            $("#list").addClass("hide");
            $("#list").empty();
            $("#individual_box").removeClass("hide")
            $(".type_select").each(function(){
                $(this).removeClass("type_select").addClass("type")
            });
            $(this).removeClass("type").addClass("type_select")
        })

        form.on('submit(submit)', function(data){
            console.log(data.field)
            $.ajax({
                type:"post",
                url:"../user/update",
                dataType:"json",
                contentType:"application/json",
                data:JSON.stringify(data.field),
                success:function(res){
                    //修改session内数据
                    $.ajax({
                        type:"get",
                        url:"../user/getUserById",
                        dataType:"json",
                        data:{
                            "id":data.field.id
                        },
                        success:function (res) {
                            console.log(res.data)
                            sessionStorage.user = JSON.stringify(res.data)
                            console.log(sessionStorage.user)
                            window.location.reload()
                        }
                    })


                }
            })

            // 阻止页面跳转--取消submit默认提交机制
            return false;
        });


        /*
            获取登录用户信息
         */
        if(typeof (sessionStorage.user) != 'undefined')
            var user =JSON.parse(sessionStorage.user);
        console.log(sessionStorage.user)
        if(user!=null){
            $(".login_btn").addClass("hide")
            $("#default_head").addClass("hide")
            $(".person_box").removeClass("hide")
            $("#top_nickname").html(user.nickname)
            $("#head-img").attr("src","../"+user.faceImage)
            $("#top_personal_signature").html(user.personalSignature)
            form.val("myInfo", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                "id":user.id
                ,"username": user.username // "name": "value"
                ,"nickname": user.nickname
                ,"phone": user.phone
                ,"email": user.email
                ,"personalSignature": user.personalSignature
            });
        }
        //点击收藏课程
        $("#reserve_course").click(function () {
            $("#list").empty();
            $("#individual_box").addClass("hide");
            $("#list").removeClass("hide")
            $(".type_select").each(function(){
                $(this).removeClass("type_select").addClass("type")
            });
            $(this).removeClass("type").addClass("type_select")
            //获取收藏信息
            $.ajax({
                type: "get",
                url: "../user/getReserves",
                dataType: "json",
                data: {
                    "id":user.id
                },
                success:function (res) {
                    console.log(res)
                    var map = []
                    for (var i=0;i<res.data.length;i++){
                        $("#list").append("<div class=\"course_item\">\n" +
                            "                    <div class=\"img_box\">\n" +
                            "                        <img  src=\"../"+res.data[i].course_image+"\" width=\"100%\" height=\"100%\"/>\n" +
                            "                    </div>\n" +
                            "                    <div class=\"course_detail_box\">\n" +
                            "                        <div class=\"course_title\">"+res.data[i].course_title+"</div>\n" +
                            "                        <div class=\"course_detail_bottom\">\n" +
                            "                            <div class=\"little_box\">\n" +
                            "                                <div class=\"play_times_box\"><img src=\"../img/播放.png\" width=\"10px\" height=\"10px\"><span>"+res.data[i].course_looks+"</span></div>\n" +
                            "                                <div class=\"create_time_box\"><img src=\"../img/时间.png\" width=\"10px\" height=\"10px\"><span>"+res.data[i].create_time+"</span></div>\n" +
                            "                            </div>\n" +
                            "                            <div class=\"create_person_box\"><img src=\"../img/user.png\" width=\"10px\" height=\"10px\"><span>"+res.data[i].nickname+"</span></div>\n" +
                            "                        </div>\n" +
                            "                    </div>\n" +
                            "            </div>")
                        map.push({"index":res.data[i].id})
                    }
                    $(".course_item").click(function () {
                        if(typeof (sessionStorage.user) == 'undefined'){
                            layer.msg("登录后才可免费观看本网站所有视频哦！");
                            return;
                        }
                        var index = $(this).index();

                        sessionStorage.setItem("id",  map[index].index);
                        console.log(map[index].index);
                        window.location.href = "../home/courseDesc"
                    })

                }
            })


        })
        //点击浏览记录
        $("#look_records").click(function () {
            $("#list").empty();
            $("#individual_box").addClass("hide");
            $("#list").removeClass("hide")
            $(".type_select").each(function(){
                $(this).removeClass("type_select").addClass("type")
            });
            $(this).removeClass("type").addClass("type_select")
            //获取收藏信息
            $.ajax({
                type: "get",
                url: "../user/getRecords",
                dataType: "json",
                data: {
                    "id":user.id
                },
                success:function (res) {
                    console.log(res)
                    var map = []
                    for (var i=0;i<res.data.length;i++){
                        $("#list").append("<div class=\"course_item\">\n" +
                            "                    <div class=\"img_box\">\n" +
                            "                        <img  src=\"../"+res.data[i].course_image+"\" width=\"100%\" height=\"100%\"/>\n" +
                            "                    </div>\n" +
                            "                    <div class=\"course_detail_box\">\n" +
                            "                        <div class=\"course_title\">"+res.data[i].course_title+"</div>\n" +
                            "                        <div class=\"course_detail_bottom\">\n" +
                            "                            <div class=\"little_box\">\n" +
                            "                                <div class=\"play_times_box\"><img src=\"../img/播放.png\" width=\"10px\" height=\"10px\"><span>"+res.data[i].course_looks+"</span></div>\n" +
                            "                                <div class=\"create_time_box\"><img src=\"../img/时间.png\" width=\"10px\" height=\"10px\"><span>"+res.data[i].create_time+"</span></div>\n" +
                            "                            </div>\n" +
                            "                            <div class=\"create_person_box\"><img src=\"../img/user.png\" width=\"10px\" height=\"10px\"><span>"+res.data[i].nickname+"</span></div>\n" +
                            "                        </div>\n" +
                            "                    </div>\n" +
                            "            </div>")
                        map.push({"index":res.data[i].id})
                    }
                    $(".course_item").click(function () {
                        if(typeof (sessionStorage.user) == 'undefined'){
                            layer.msg("登录后才可免费观看本网站所有视频哦！");
                            return;
                        }
                        var index = $(this).index();

                        sessionStorage.setItem("id",  map[index].index);
                        console.log(map[index].index);
                        window.location.href = "../home/courseDesc"
                    })

                }
            })


        })



        /***
         * 获取课程数据
         */
       /* $.ajax({
            type: "get",
            url: "course/courses/",
            dataType: "json",
            data: {
                "type": "全部"
            },
            success:function (res) {
                console.log(res)
                var map = []
                for (var i=0;i<res.data.length;i++){
                    $("#list").append("<div class=\"course_item\">\n" +
                        "                    <div class=\"img_box\">\n" +
                        "                        <img  src=\""+res.data[i].course_image+"\" width=\"100%\" height=\"100%\"/>\n" +
                        "                    </div>\n" +
                        "                    <div class=\"course_detail_box\">\n" +
                        "                        <div class=\"course_title\">"+res.data[i].course_title+"</div>\n" +
                        "                        <div class=\"course_detail_bottom\">\n" +
                        "                            <div class=\"little_box\">\n" +
                        "                                <div class=\"play_times_box\"><img src=\"img/播放.png\" width=\"10px\" height=\"10px\"><span>"+res.data[i].course_looks+"</span></div>\n" +
                        "                                <div class=\"create_time_box\"><img src=\"img/时间.png\" width=\"10px\" height=\"10px\"><span>"+res.data[i].create_time+"</span></div>\n" +
                        "                            </div>\n" +
                        "                            <div class=\"create_person_box\"><img src=\"img/user.png\" width=\"10px\" height=\"10px\"><span>"+res.data[i].nickname+"</span></div>\n" +
                        "                        </div>\n" +
                        "                    </div>\n" +
                        "            </div>")
                    map.push({"index":res.data[i].id})
                }
                $(".course_item").click(function () {
                    var index = $(this).index();

                    sessionStorage.setItem("id",  map[index].index);
                    console.log(map[index].index);
                    window.location.href = "home/courseDesc"
                })

            }
        })*/
    })

</script>
</body>
</html>